<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useWindowScroll } from '@vueuse/core'
import Case from './components/Case.vue'
import { getCase } from '~/service/case'
import { useGlobalStore } from '~/composables/global'

const { locale } = useLocale()
const language = ref(locale.value === 'zh' ? 'zh' : 'en')

const { width } = useWindowSize()
const windowWidth = ref(width.value)
watch(width, (newWidth) => {
  windowWidth.value = newWidth
})

const { changeMode } = useHeader('transparent')
const { y } = useWindowScroll()

watch(y, (newY) => {
  changeMode(newY > 90 ? 'light' : 'transparent')
})
definePageMeta({
  title: '优质案例',
})

const router = useRouter()

// 案例列表
const caseList = ref([])
// 案例前二
// const caseListTop2 = ref([])
// 剩余案例
const caseListRest = ref([])

// 获取案例列表
async function getCaseList() {
  const { list } = await getCase()
  caseList.value.push(...list)
  caseList.value = caseList.value?.map((item) => {
    return {
      ...item,
      cover_url: useGlobalStore().resolveImgURL(item.cover_url),
    }
  })
  //   caseListTop2.value = caseList.value.slice(0, 2)
  //   caseListRest.value = caseList.value.slice(2)
  caseListRest.value = caseList.value
}
onMounted(async () => {
  await getCaseList()
})

// 跳转详情页
function toDetail(id) {
  router.push({
    path: '/examples/case',
    query: {
      id,
    },
  })
}
useHead({
  title: `案例中心-超益钢业`,
})
</script>

<template>
  <!-- <div mt="90px" class="pl-[94px] pr-[94px]"> -->
  <div>
    <!-- <div h="[400px]" class="flex flex-col items-center justify-center bg-[url(~/assets/img/img_case——banner.png)]">
      <h1 class="text-[46px] text-[#fff]" data-aos="fade-down" data-aos-delay="100">
        {{ $t('menu.cases') }}
      </h1>
      <h2 text="uppercase [#ffffff33] [42px]" data-aos="fade-up" data-aos-delay="100">
        CASE
      </h2>
    </div> -->
    <!-- <section v-bind="$attrs">
      <div mt="[105px]" pl="[76px]" text="[18px]" :class="{ marginsBig: windowWidth > 828, marginsSmall: windowWidth < 828 }">
        <div mt="[48px]">
          <div v-for="cases in caseListTop2" :key="cases.id" p="b-[24px]" border="b-[1px] b-solid b-[#f1f1f1]" class="items-start" data-aos="fade-up" data-aos-delay="100">
            <img class="mr-[48px] w-[1580px]" :src="cases?.cover_url" :style="{ height: windowWidth > 828 ? '896' : '200' }">
            <div flex="shrink-0" m="r-[32px]" p="y-[5px]" text="start" :style="{ 'line-height': windowWidth > 828 ? '32px' : '18px' }">
              <div class="mt-[40px] text-[34px] font-sans max-md:text-[18px]">
                {{ get(cases, 'title', locale) }}
              </div>
              <div text="[18px]" style="color: rgba(31,31,31,0.4);margin-bottom: 20px;" :style="{ margin: windowWidth > 828 ? '40px 0 20px' : '5px 0' }">
                {{ get(cases, 'address', locale) }}
              </div>
              <div text="[18px]" style="color: #444444;" :style="{ 'line-height': windowWidth > 828 ? '26px' : '18px' }">
                {{ get(cases, 'abstract', locale) }}
              </div>
              <div text="[18px]" style="color: #444444;" flex="~ 1" class="point mt-[40px] flex items-center" @click="toDetail(cases.id)">
                <span class="mr-[10px]">{{ language === 'zh' ? '了解更多' : 'more' }}</span>
                <img src="~/assets/img/icon_arrow_right.png" class="h-[20px] w-[20px]">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section> -->
    <Case />
    <section v-bind="$attrs">
      <div pl="[76px]" text="[18px]" :class="{ marginsBig: windowWidth > 828, marginsSmall: windowWidth < 828 }">
        <div>
          <div max-md:hidden m="t-[32px]" grid="~ cols-4 gap-x-[48px] gap-y-[32px]" mb="[100px]">
            <div v-for="cases in caseListRest" :key="cases.id" flex="~ 1" justify="between" border="b-[1px] solid [#f1f1f1]" p="b-[24px]" text="[16px]" class="point" data-aos="fade-up" data-aos-delay="100" @click="toDetail(cases.id)">
              <div>
                <!-- <div class="picStyle" :style="{ background: `url(${cases?.cover_url})center center no-repeat`, backgroundSize: '100%' }"></div> -->
                <div class="picStyle">
                  <img :src="cases?.cover_url">
                </div>
                <h5 text="[24px]" style="text-align: center;" p="y-[20px]">
                  {{ get(cases, 'title', locale) }}
                </h5>
                <div style="text-align: center;color: rgba(31,31,31,0.6);">
                  {{ get(cases, 'address', locale) }}
                </div>
              </div>
            </div>
          </div>
          <div hidden max-md:block m="t-[32px]" grid="~ cols-2 gap-x-[60px] gap-y-[32px]" mb="[100px]">
            <div v-for="cases in caseListRest" :key="cases.id" flex="~ 1" justify="between" border="b-[1px] solid [#f1f1f1]" p="b-[24px]" text="[16px]" class="point" data-aos="fade-up" data-aos-delay="100" @click="toDetail(cases.id)">
              <div>
                <div class="picStyle1">
                  <img :src="cases?.cover_url">
                </div>
                <h5 text="[24px]" style="text-align: center;" p="y-[20px]">
                  {{ get(cases, 'title', locale) }}
                </h5>
                <div style="text-align: center;color: rgba(31,31,31,0.6);">
                  {{ get(cases, 'address', locale) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- </div> -->
</template>

<style scoped lang="postcss">
.bottom-lined:after {
  content: '';
  display: block;
  position: relative;
  height: 3px;
  width: 30px;
  left: 8px;
  top: 8px;
  background-color: #0083ff;
}

.top-lined:before {
  content: '';
  display: block;
  position: relative;
  height: 3px;
  width: 30px;
  left: 8px;
  bottom: 8px;
  background-color: #0083ff;
}
.point {
  cursor: pointer;
}
.picStyle {
  height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.picStyle1 {
  height: 120px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.marginsBig {
  padding: 0 15%;
}
.marginsSmall {
  padding: 0 20px;
}
</style>
